<template>
  <demo-content :title="title">
    <p></p>
    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "路径绘制";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.closePath();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "blue";
  ctx.fillStyle = "orange";
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(300, 100);
  ctx.lineTo(400, 100);
  ctx.lineTo(400, 200);
  ctx.lineTo(300, 200);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.beginPath();
  ctx.arc(250, 250, 50, 0, 2 * Math.PI);
  ctx.moveTo(280, 250);
  ctx.arc(250, 250, 30, 0, Math.PI);
  ctx.moveTo(235, 230);
  ctx.arc(230, 230, 5, 0, 2 * Math.PI);
  ctx.moveTo(275, 230);
  ctx.arc(270, 230, 5, 0, 2 * Math.PI);
  ctx.strokeStyle = "green";
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(400, 10);
  // ctx.arcTo(400, 10, 500, 90, 50);
  ctx.arcTo(450, 10, 450, 60, 50);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.lineCap = "butt";
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);
  ctx.setLineDash([10, 5, 5]);
  console.log("@@@", ctx.getLineDash());
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.miterLimit = 9;
  ctx.moveTo(10, 40);
  ctx.lineTo(50, 40);
  ctx.lineTo(10, 50);
  ctx.stroke();
});
</script>

<style src="./default.css" scoped></style>
